import React from 'react'
import { Layout, Card, Typography, Button, Space, Row, Col } from 'antd'
import { UserOutlined, LogoutOutlined, DashboardOutlined } from '@ant-design/icons'
import { useNavigate } from 'react-router-dom'
import { authUtils } from '@/components/AuthGuard'

const { Header, Content } = Layout
const { Title, Text } = Typography

const Home: React.FC = () => {
  const navigate = useNavigate()

  const handleLogout = () => {
    // 清理登录状态
    authUtils.logout()
    navigate('/login')
  }

  return (
    <Layout className="min-h-screen">
      {/* 顶部导航 */}
      <Header className="bg-gray-800 shadow-sm border-b px-6 flex items-center justify-between">
        <div className="flex items-center space-x-4">
          <DashboardOutlined style={{ color: '#ffffff', fontSize: '20px' }} />
          <Title level={4} style={{ color: '#ffffff', margin: 0 }}>
            管理后台
          </Title>
        </div>
        
        <div className="flex items-center space-x-4">
          <Space>
            <UserOutlined style={{ color: '#ffffff' }} />
            <Text style={{ color: '#ffffff', fontWeight: 500 }}>admin</Text>
            <Button 
              type="text" 
              icon={<LogoutOutlined style={{ color: '#ffffff' }} />}
              onClick={handleLogout}
              style={{ color: '#ffffff', fontWeight: 500 }}
              className="hover:!text-gray-300"
            >
              退出登录
            </Button>
          </Space>
        </div>
      </Header>

      {/* 主要内容区域 */}
      <Content className="p-6 bg-gray-50">
        <div className="max-w-6xl mx-auto">
          {/* 欢迎区域 */}
          <div className="mb-6">
            <Title level={2} className="!mb-2">
              欢迎回来！👋
            </Title>
            <Text className="text-gray-600 text-lg">
              这里是你的个人工作台，开始你的日常工作吧！
            </Text>
          </div>

          {/* 功能卡片区域 */}
          <Row gutter={[24, 24]}>
            <Col xs={24} sm={12} lg={8}>
              <Card 
                hoverable 
                className="h-40 flex flex-col justify-center"
                styles={{ body: { textAlign: 'center' } }}
              >
                <div className="text-blue-500 text-4xl mb-4">
                  📊
                </div>
                <Title level={4} className="!mb-2">
                  数据统计
                </Title>
                <Text className="text-gray-500">
                  查看系统数据和统计报表
                </Text>
              </Card>
            </Col>
            
            <Col xs={24} sm={12} lg={8}>
              <Card 
                hoverable 
                className="h-40 flex flex-col justify-center"
                styles={{ body: { textAlign: 'center' } }}
              >
                <div className="text-green-500 text-4xl mb-4">
                  📝
                </div>
                <Title level={4} className="!mb-2">
                  内容管理
                </Title>
                <Text className="text-gray-500">
                  管理文章、媒体和其他内容
                </Text>
              </Card>
            </Col>
            
            <Col xs={24} sm={12} lg={8}>
              <Card 
                hoverable 
                className="h-40 flex flex-col justify-center"
                styles={{ body: { textAlign: 'center' } }}
              >
                <div className="text-purple-500 text-4xl mb-4">
                  ⚙️
                </div>
                <Title level={4} className="!mb-2">
                  系统设置
                </Title>
                <Text className="text-gray-500">
                  配置系统参数和用户权限
                </Text>
              </Card>
            </Col>
            
            <Col xs={24} sm={12} lg={8}>
              <Card 
                hoverable 
                className="h-40 flex flex-col justify-center"
                styles={{ body: { textAlign: 'center' } }}
              >
                <div className="text-orange-500 text-4xl mb-4">
                  💼
                </div>
                <Title level={4} className="!mb-2">
                  业务管理
                </Title>
                <Text className="text-gray-500">
                  处理日常业务和流程管理
                </Text>
              </Card>
            </Col>
            
            <Col xs={24} sm={12} lg={8}>
              <Card 
                hoverable 
                className="h-40 flex flex-col justify-center"
                styles={{ body: { textAlign: 'center' } }}
              >
                <div className="text-red-500 text-4xl mb-4">
                  🔔
                </div>
                <Title level={4} className="!mb-2">
                  消息通知
                </Title>
                <Text className="text-gray-500">
                  查看系统通知和消息提醒
                </Text>
              </Card>
            </Col>
            
            <Col xs={24} sm={12} lg={8}>
              <Card 
                hoverable 
                className="h-40 flex flex-col justify-center"
                styles={{ body: { textAlign: 'center' } }}
              >
                <div className="text-cyan-500 text-4xl mb-4">
                  📈
                </div>
                <Title level={4} className="!mb-2">
                  性能监控
                </Title>
                <Text className="text-gray-500">
                  监控系统性能和运行状态
                </Text>
              </Card>
            </Col>
          </Row>
        </div>
      </Content>
    </Layout>
  )
}

export default Home